<template>
  <div class="clock">
    <div class="item-top">{{currentDate}}</div>
    <div class="item-bottom">{{ currentTime }}</div>
  </div>
</template>
<script>
  export default {
    name: 'Clock',
    data() {
      return {
        currentDate: '',
        currentTime: ''
      };
    },
    created() {
      this.updateTime();
      this.interval = setInterval(this.updateTime, 1000);
    },
    beforeUnmount() {
      clearInterval(this.interval);
    },
    methods: {
      getCurrentDate() {
        const now = new Date();
        this.currentDate =
          `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`;
      },
      updateTime() {
        this.getCurrentDate();
        const now = new Date();
        this.currentTime = now.toLocaleTimeString();
      }
    }
  };
</script>
<style lang="less" scoped>
  .clock {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: 'DIGITAL';
    color: #10239e;
    .item-top {
      font-size: 8vh;
      line-height: 12vh;
    }

    .item-bottom {
      font-size: 16vh;
      line-height: 16vh;
    }
  }
</style>